<template>
  <navbar @event="handleClick"></navbar>
  <br>{{ mytext }}<br>
  <listbar v-if="isShow"></listbar>
</template>

<script>
import navbar from './ChildComp.vue'
import listbar from './listComp.vue'
import { reactive, toRefs } from '@vue/reactivity'
export default {
    components:{
        navbar,
        listbar
    },
    setup () {
        const state = reactive({
            isShow: false,
            mytext: ''
        })

        const handleClick = (sonData) => {
            state.isShow = !state.isShow
            if(state.isShow) state.mytext = sonData
            else state.mytext=''
        }

        return {
            ...toRefs(state),
            handleClick
        }
    }
}
</script>

<style>

</style>